<template>
  <div class="page">
    <div v-if="!breadHeard.title" class="comptitle">{{title}}
      <span class="addbtn" v-if="btnName" @click="titleEvent">{{btnName}}</span>
    </div>
    <header v-if="breadHeard.title">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <el-button type="text" @click="breadBack">{{breadHeard.firstBread}}</el-button>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{breadHeard.secondBread}}</el-breadcrumb-item>
      </el-breadcrumb>
    </header>
      <div class="title" v-if="breadHeard.title">{{breadHeard.title}}</div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      require: String,
      default: ''
    },
    btnName: {
      require: String,
      default: ''
    },
    breadHeard: {
      require: Object,
      default: () => { return {} }
    }
  },
  methods: {
    titleEvent () {
      this.$emit('titleEvent')
    },
    breadBack () {
      this.$emit('backLast')
      this.$store.commit('sceneController/update_isAddSensor', false)
    }
  }
}
</script>

<style scoped lang="scss">
.page {
    // overflow-y: auto;
    float: right;
    height: calc(100% - 30px);
    width: 100%;
    padding: 0 30px;
    &::-webkit-scrollbar {
    display: none;
    }
  .title {
    position: relative;
    width: 100%;
    background-color: #f2f2f2;
    font-size: 24px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 42px;
  }
    .comptitle {
      position: relative;
      width: 100%;
      background-color: #f2f2f2;
      font-size: 24px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      height: 90px;
      line-height: 90px;
  }
  .addbtn {
    position: absolute;
    width: 108px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 21px;
    background-color: #4868ff;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
header{
    padding-top: 24px;
  .el-breadcrumb {
    .el-breadcrumb__item{
        line-height: 20px;
        float:none
      }
      .el-button--text{
        color: #4868ff ;
      }
    }
  }
  .mt-28{
    margin-top: 28px;
  }
}
</style>
